<template>
  <div class="content">
    <!-- <el-row class="content_header">
      <div class="left">
        <h2>员工列表</h2>
      </div>
      <div class="right">
        <el-button type="danger">删除</el-button>
        <el-button type="primary" @click="centerDialogVisible = true"
          >新建员工</el-button
        >
      </div>
    </el-row> -->
    <div class="header">
      <slot name="header">
        <div class="title">{{ title }}</div>
        <div class="handler">
          <slot name="headerHandler"></slot>
        </div>
      </slot>
    </div>
    <el-table
      :data="listdata"
      border
      style="width: 100%"
      :showIndexColumn="showIndexColumn"
      height="500"
      :showSelectColumn="showSelectColumn"
      ref="multipleTableRef"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        align="center"
        v-if="showSelectColumn"
        width="60"
      >
      </el-table-column>
      <el-table-column
        type="index"
        align="center"
        v-if="showIndexColumn"
        label="序号"
        width="60"
      >
      </el-table-column>

      <template v-for="propItem in propList" :key="propItem.prop">
        <el-table-column v-bind="propItem" align="center">
          <!-- 使用动态插槽 -->
          <template #default="scope">
            <slot :name="propItem.slotName" :row="scope.row">
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页器 -->
    <div class="footer">
      <slot name="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[5]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="20"
        >
        </el-pagination>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import User from "../type";
import type { FormInstance, FormRules } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import { useStore } from "vuex";
import OSS from "ali-oss";
export default defineComponent({
  name: "HyTable",
  props: {
    listdata: {
      type: Array,
      required: true
    },
    propList: {
      type: Array,
      required: true
    },
    showIndexColumn: {
      type: Boolean,
      default: false
    },
    showSelectColumn: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    page: {
      type: Object,
      default: () => ({ currentPage: 1, pageSize: 5 })
    }
  },
  emits: ["selectionChange", "update:page"],
  setup(props, { emit }) {
    const store = useStore();
    // 新建员工是否显示
    let centerDialogVisible = ref(false);
    const rules = reactive<FormRules>({
      name: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur"
        },
        {
          min: 3,
          max: 12,
          message: "Length should be 3 to 12",
          trigger: "blur"
        }
      ],
      region: [
        {
          required: true,
          message: "请选择性别",
          trigger: "change"
        }
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur"
        },
        {
          min: 3,
          max: 16,
          message: "Length should be 3 to 16",
          trigger: "blur"
        }
      ],
      phone: [
        {
          required: true,
          message: "请输入电话号码",
          trigger: "blur"
        },
        {
          min: 11,
          max: 12,
          message: "Length should be 11 to 12",
          trigger: "blur"
        }
      ],
      type: [
        {
          type: "array",
          required: true,
          message: "请选择员工的身份",
          trigger: "change"
        }
      ]
    });
    const ruleForm = reactive({
      name: "",
      region: "",
      password: "",
      phone: "",
      type: [],
      desc: {}
    });
    const formSize = ref("default");
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log("submit!");
          ruleForm.desc = fileList;
          // 派发请求到store
          store.dispatch("system/postemployeedata", ruleForm);
        } else {
          console.log("error submit!", fields);
        }
      });
    };
    const fileList = ref<UploadUserFile[]>([
      {
        name: "food.jpeg",
        url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
      }
    ]);

    const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
      console.log(uploadFile, uploadFiles);
    };

    const handlePreview: UploadProps["onPreview"] = (file) => {
      console.log(file);
    };
    // 找到选中某个的数据
    const handleSelectionChange = (value: any) => {
      console.log(value);
    };
    // 分页器的两个事件
    const handleSizeChange = (pageSize: number) => {
      emit("update:page", { ...props.page, pageSize });
    };
    const handleCurrentChange = (currentPage: number) => {
      emit("update:page", { ...props.page, currentPage });
    };
    return {
      centerDialogVisible,
      rules,
      ruleForm,
      formSize,
      submitForm,
      handleRemove,
      handlePreview,
      fileList,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange
    };
  }
});
</script>
<style scoped lang="less">
.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .header {
    width: 100%;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    .title {
      font-weight: 600;
      font-size: 25px;
    }
  }
  .footer {
    margin: 0 auto;
  }
  .content_header {
    /deep/ .right {
      padding-top: 8px;
    }
  }
  .content_footer {
    text-align: center;
    margin: 0 auto;
  }
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
/deep/ .el-row.content_header {
  width: 100%;
  padding: 0px 20px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  background-color: silver;
  border-radius: 10px 10px 0px 0px;
}
/deep/ .el-checkbox__input {
  padding-left: 10px;
}
</style>
